<template>
    <div class="qdsq app-container">
        <el-form :inline="true">
            <el-form-item>
                <!-- <el-date-picker v-model="dateRange" size="small" style="width: 340px" value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" >
                </el-date-picker> -->
                <el-date-picker v-model="selTime" size="small" value-format="yyyy-MM-dd"
                    type="date" placeholder="请选择（日）" >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-table stripe v-loading="loading" border :data="sslist"  >
            <el-table-column label="上报时间" align="left" prop="statHour" >
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.chkTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="curFlow" label="流量(m³/h)" align="left" ></el-table-column>
            <el-table-column prop="sumFlow" label="累计流量(m³)" align="left"></el-table-column>
          <el-table-column prop="cellVolt" label="电压(V)" align="left"></el-table-column>
          <!--            <el-table-column prop="signalSize" label="信号强度(dBm)" align="left"></el-table-column>-->
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
             :page-sizes="[5, 8, 10, 20]"
            @pagination="getlist"
            />

        <div v-show="ecshow" id="jcsjtcl_echars" v-loading="loading" ></div>

    </div>
</template>

<script>
import {  getsslistsl, getsslistlinesl  } from "@/api/measurement/watermonitor"
import echarts from 'echarts'


export default {
    name: "qdsqssjcsl",
    props:['czid','ymtype'],
    data() {
        return {
            //测站统计
            cztgitem:{
                znum: 0,
            },
            dateRange:[],
            selTime:'',
            // 遮罩层
            loading: true,
            sslist:[],
            // 列表高度
            tableHeight:350,
            ecshow:true,
            pageNum:1,
            pageSize:5,
            total:0,
        };
    },
    created() {
    },
    mounted () {
        var wd = document.body.clientWidth*0.5;
        document.getElementById("jcsjtcl_echars").style.width = wd+"px";
        this.czid = this.$props.czid
        this.getlsimg();
        this.getlist()
    },
    methods: {
        handleQuery(){
            this.getlsimg();
            this.getlist()
        },
        ckgd(){
            const z = this.ecshow;
            if(z){
                this.ecshow = false;
                this.tableHeight = 650;
            }else{
                this.ecshow = true;
                this.tableHeight = 350;
            }
        },
        getlist(){
            const _t = this;
            var pd = {
                statCd : this.$props.czid,
                chkTime:this.selTime,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            }

            _t.loading = true;
                getsslistsl(pd).then(response => {
                _t.sslist = response.rows;
                _t.total = response.total;
                _t.loading = false;
            });
        },
        getlsimg(){
            const _t = this;
            _t.loading = true;
            var pd = {
                statCd : this.$props.czid,
                chkTime:this.selTime,
            }
                getsslistlinesl(pd).then(res => {
                var dlist = res.data.reverse();
                var sjlist = [];
                var lllist = [];
                var qs = [];
                if(dlist.length==0){
                    _t.loadechartssl(sjlist,lllist,qs);
                    _t.loading = false;
                    return;
                }
                for (let i = dlist.length-1; i >= 0; i--) {
                    sjlist.push(dlist[i].statHour.substr(11,5));
                    lllist.push(dlist[i].hourFlow);
                    //qs.push(dlist[0].botHig);
                }
                _t.loadechartssl(sjlist,lllist,qs);
                _t.loading = false;
            })



        },
      loadechartssl(sjlist,lllist,qs) {
        // 基于准备好的dom，初始化echarts实例
        var echarts = require('echarts');
        var myChart = echarts.init(document.getElementById('jcsjtcl_echars'));
        // 绘制图表
        myChart.setOption({
          color:['#5DACD8','#51B1FF'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            top: '30%',
            containLabel: true
          },
          // legend: {
          //     data: [
          //         // '渠深',
          //         '水位', '流量'],
          //     right: 10,
          //     icon: "line"
          // },
          title: {
            text: '实时监测信息过程线',
            left: 'left',
            textStyle:{
              //文字颜色
              color:'#1699F3',
              fontStyle:'normal',
              fontWeight:'bold',
              //字体系列
              fontFamily:'sans-serif'
            }

          },
          tooltip: {
            trigger: 'axis',
            formatter(params){
              // let fParams = params[0];
              let str = ''
              let sParams = params[0];
              if(sParams){
                str += '<br>' + sParams.seriesName + ' : ' + sParams.value+'m³/h';
              }
              return   str
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: sjlist,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#9e9e9e'
              }
            },
          },
          yAxis : [ {
            name: '(m³/h)',
            type: 'value',
            splitLine:{show:false},
          }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            }
          ],
          series: [
            // {
            //     name: '渠深',
            //     type: 'line',
            //     symbol:"none", // 是否显示节点
            //     lineStyle:{      //警戒线的样式  ，虚实  颜色
            //         type:"dotted",   // type: 'solid'  //'dotted'虚线 'solid'实线
            //         borderWidth:8,
            //     },
            //     data: qs,
            // },

            {
              name: '流量',
              type: 'line',
              symbol:"none", // 是否显示节点
              data: lllist,
              yAxisIndex:0,
              smooth: true,
            }
          ]
        });
      }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">

    #jcsjtcl_echars{
        width: 300px;
        height: 300px;
        margin: 30px auto;
    }

    .tb_wz{
        width: 200px;
        margin: 30px auto;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #1699F3;
        text-align: center;
        cursor: pointer;
    }

    .qdsq{
        padding: 0;
        min-width: 700px;
    }

</style>
